<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">

		<!-- 引入组件 -->
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/vant.js"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="20">
						<van-search placeholder="搜索商品名称" v-model="value" background="red" />
					</van-col>
					<van-col span="4" id="chat">
						<van-icon name="chat-o" size="35px" color="white" />
					</van-col>
				</van-row>
			</header>
			<section>
				<van-swipe :autoplay="3000" class="swipe_bj">
					<van-swipe-item v-for="(image, index) in carousel" :key="index">
						<img :src="image.ImageUrl" class="swipe_img" />
					</van-swipe-item>
				</van-swipe>

				<van-row class="div_sel">
					<van-col span="6" offset="1">
						<van-row>&nbsp; <img class="img_sel" src="../img/jiu.JPG" /></van-row>
						<van-row>酒水饮料</van-row>
					</van-col>
					<van-col span="6" offset="1">
						<van-row>&nbsp; <img class="img_sel" src="../img/chu.JPG" /></van-row>
						<van-row>厨房用具</van-row>
					</van-col>
				</van-row>
				<br />
				<van-row class="zixun" gutter="10">
					<van-col span="3" class="right_border"><span class="tag_zx"><b>资讯</b> </span></van-col>
					<van-col span="18" class="right_border">
						{{titles[title_action].Title}}
						<!-- <van-swipe :autoplay="3000" vertical show-indicators="false">
							<van-swipe-item v-for="(_title, index) in titles" :key="index">
								{{_title.Title}}
							</van-swipe-item>
						</van-swipe> -->
					</van-col>
					<van-col span="3">更多</van-col>
				</van-row>
				<van-collapse v-model="activeNames">
					<van-collapse-item size="large" border="true" title-class="left_border_red" title="热门推荐" name="1">
						<van-row gutter="10">
							<van-col span="6" @click="IntoDetails(recommend.Id)">
								<van-row><img src="../img/3.JPG" /></van-row>
								<van-row>{{recommend.Name}}</van-row>
								<van-row><span class="tag_zx">￥<span>{{recommend.RealPrice}}</span></span> </van-row>
							</van-col>
						</van-row>
					</van-collapse-item>
					<van-collapse-item size="large" title-class="left_border_blue" title="商品列表" name="2">
						<van-card v-for="product in shops" @click="IntoDetails(product.Id)" :title="product.Name">
							<span slot="thumb">
								<img :src="product.GoodsImageUrl.src" onerror="this.src='../img/product_default.png';" />
							</span>
							<span slot="price">￥{{product.RealPrice}}</span>
							<span slot="origin-price">￥{{product.MarketPrice}}</span>
							<span slot="desc">累计销量{{product.VirtralSaleCount}}</span>
							<span slot="num">{{product.BrowseCount}}次浏览</span>
						</van-card>
					</van-collapse-item>
				</van-collapse>
			</section>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					value: "",
					productList: [],
					title_action: 0,
					titles: [],
					activeNames: ['1','2'],
					recommend: [],
					shops: [],
					carousel: []
				},
				mounted: function() {
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						success: function(res) {
							if (res.Data != null) {
								vm.productList = res.Data;
								vm.titles = vm.productList.InformationList;
								vm.recommend = vm.productList.GoodsRecommendList[0];
								vm.carousel = vm.productList.CarouselFigureList;
							} else {
								vm.$toast.fail({
									message: "沒有shu",
									duration: 5000
								});
							}
						}
					});
					//获取商品列表数据
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						success: function(res) {
							if (res.Data != null) {
								vm.shops = res.Data;
							} else {
								vm.$toast.fail({
									message: "沒有数据",
									duration: 5000
								});
							}
						}
					});

				},
				computed:{
					title_action:function(){
						
					}
				},
				created: function() {
										window.setInterval(function(){
											if(vm.title_action==2){
												vm.title_action=0;
											}
											vm.title_action ++;
										},6000);
				},
				methods: {
					IntoDetails: function(id) {
						var self_home = plus.webview.currentWebview();
						var child_detail = plus.webview.create("../details/detail.html", "detail", {}, {
							Id: id
						});
						self_home.append(child_detail);
						plus.webview.show("detail");
					}
				}
			})
		</script>
	</body>
</html>
